<title>滑块组件</title>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>滑块组件</cite></a>
    </div>
</div>

<style>
    .test-slider-demo {
        margin: 45px 30px;
    }
</style>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">基础效果</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome1"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">定义初始值</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome1"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">设置最大最小值</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome3"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">设置步长</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome4"></div>
                    <div class="test-slider-demo" id="test-slider-dome5"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">设置提示文本</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome6"></div>
                    <div class="test-slider-demo" id="test-slider-dome7"></div>
                    <div id="test-slider-tips1" style="position:relative; left: 30px; top: -20px;"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">开启输入框</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome8"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">开启范围选择</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome9"></div>
                    <div id="test-slider-tips2" style="position:relative; left: 30px; margin-top: -10px;"></div>
                    <div class="test-slider-demo" id="test-slider-dome10"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">垂直滑块</div>
                <div class="layui-card-body">
                    <div id="test-slider-dome11" style="margin: 45px 30px; display: inline-block;"></div>
                    <div id="test-slider-dome12" style="margin: 45px 30px; display: inline-block;"></div>
                    <div id="test-slider-dome13" style="margin: 45px 30px; display: inline-block;"></div>
                    <div id="test-slider-dome14" style="margin: 45px 30px; display: inline-block;"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">自定义颜色</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome15"></div>
                    <div class="test-slider-demo" id="test-slider-dome16"></div>
                    <div class="test-slider-demo" id="test-slider-dome17"></div>
                </div>
            </div>
            <div class="layui-card">
                <div class="layui-card-header">禁用滑块</div>
                <div class="layui-card-body">
                    <div class="test-slider-demo" id="test-slider-dome18"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'slider'], function () {
        var $ = layui.$
            , slider = layui.slider;

        //默认滑块
        slider.render({
            elem: '#test-slider-dome1'
        });

        //定义初始值
        slider.render({
            elem: '#test-slider-dome2'
            , value: 20 //初始值
        });

        //设置最大最小值
        slider.render({
            elem: '#test-slider-dome3'
            , min: 20 //最小值
            , max: 50 //最大值
        });

        //设置步长
        slider.render({
            elem: '#test-slider-dome4'
            , step: 10 //步长
        });

        slider.render({
            elem: '#test-slider-dome5'
            , step: 10 //步长
            , showstep: true //开启间隔点
        });

        //设置提示文本
        slider.render({
            elem: '#test-slider-dome6'
            , min: 20
            , max: 1000
            , setTips: function (value) { //自定义提示文本
                return value + 'GB';
            }
        });
        slider.render({
            elem: '#test-slider-dome7'
            , tips: false //关闭默认提示层
            , change: function (value) {
                $('#test-slider-tips1').html('当前数值：' + value);
            }
        });

        //开启输入框
        slider.render({
            elem: '#test-slider-dome8'
            , input: true //输入框
        });

        //开启范围选择
        slider.render({
            elem: '#test-slider-dome9'
            , value: 40 //初始值
            , range: true //范围选择
            , change: function (vals) {
                $('#test-slider-tips2').html('开始值：' + vals[0] + '、结尾值：' + vals[1]);
            }
        });
        slider.render({
            elem: '#test-slider-dome10'
            , value: [30, 60] //初始值
            , range: true //范围选择
        });

        //垂直滑块
        slider.render({
            elem: '#test-slider-dome11'
            , type: 'vertical' //垂直滑块
        });
        slider.render({
            elem: '#test-slider-dome12'
            , value: 30
            , type: 'vertical' //垂直滑块
        });
        slider.render({
            elem: '#test-slider-dome13'
            , value: 50
            , range: true //范围选择
            , type: 'vertical' //垂直滑块
        });
        slider.render({
            elem: '#test-slider-dome14'
            , value: 80
            , input: true //输入框
            , type: 'vertical' //垂直滑块
        });

        //自定义颜色
        slider.render({
            elem: '#test-slider-dome15'
            , theme: '#1E9FFF' //主题色
        });
        slider.render({
            elem: '#test-slider-dome16'
            , value: 50
            , theme: '#5FB878' //主题色
        });
        slider.render({
            elem: '#test-slider-dome17'
            , value: [30, 70]
            , range: true
            , theme: '#FF5722' //主题色
        });

        //禁用滑块
        slider.render({
            elem: '#test-slider-dome18'
            , value: 35
            , disabled: true //禁用滑块
        });
    });
</script>